<template>
	<u-cell-group>
		<u-cell-item title="任务名称" :value="detailInfos.projectName" :arrow="false" :border-bottom="false" :value-style = "{'color': '#1D2129', 'font-size' : '28rpx'}"></u-cell-item>
		<u-cell-item title="任务类型" :value="getTaskTextFromType(detailInfos.taskType)" :arrow="false" :border-bottom="false" :value-style = "{'color': '#1D2129', 'font-size' : '28rpx'}"></u-cell-item>
		<u-cell-item title="起始时间" :value="detailInfos.startDate" :arrow="false" :border-bottom="false" :value-style = "{'color': '#1D2129', 'font-size' : '28rpx'}"></u-cell-item>
		<u-cell-item title="结束时间" :value="detailInfos.endDate" :arrow="false" :border-bottom="false" :value-style = "{'color': '#1D2129', 'font-size' : '28rpx'}"></u-cell-item>
		<u-cell-item title="项目筛查总人数" :value="detailInfos.targetTotal" :arrow="false" :border-bottom="false" :value-style = "{'color': '#1D2129', 'font-size' : '28rpx'}"></u-cell-item>
		<u-cell-item title="分配筛查人数" :value="detailInfos.orgTarget" :arrow="false" :border-bottom="false" :value-style = "{'color': '#1D2129', 'font-size' : '28rpx'}"></u-cell-item>
		<!-- <u-cell-item title="任务状态" :value="getTaskStatusFromStatus(detailInfos.taskStatus)" :arrow="false"></u-cell-item> -->
		<u-cell-item title="任务状态" :value="detailInfos.taskStatus" :arrow="false" :value-style = "{'color': detailInfos.taskStatus == '待执行' ? '#0FC6C2' : '#1D2129', 'font-size' : '28rpx'}"></u-cell-item>
	</u-cell-group>
	<view class="code">
		<img :src="detailInfos.docQrUrl" alt="二维码展示" />
		<view class="text">
			完成人数
		</view>
		<view class="num">
			{{ detailInfos.docAchieveNum }}
		</view>
	</view>
	<view class="footer_view">
		<ym-footer></ym-footer>
	</view>

</template>


<script setup>
	import {
		ref,
		onMounted
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getScreenTaskDetail
	} from '../../apis/api.js'
	
	const projectId = ref('')
	const docCode = ref('')
	
	const detailInfos = ref({
		// projectId: '0',
		// projectName: '测试名称',
		// docCode: '',
		// /// taskType：0-筛查任务；1-派遣任务；2-随访任务
		// taskType: '0',
		// orgTarget: '2024-06-19 18:30',
		// orgAchieveNum: '2024-06-22 18:30',
		// docTarget: 500,
		// docAchieveNum: 300,
		// taskStatus: '0',
		// docQrUrl: ''
	})
	
	onLoad((e) => {
		console.log('筛查任务' + e)
		projectId.value = e.projectId
		docCode.value = e.docCode
	})
	
	onMounted(() => {
		console.log('筛查任务' + '只会执行一次的生命周期，做网络请求使用')
		getScreenTaskDetailInfo()
	})
	
	const getScreenTaskDetailInfo = async () => {
		try{
			const res = await getScreenTaskDetail({
				projectId: projectId.value,
				docCode: docCode.value
			})
			console.log(res.data)
			detailInfos.value = res.data
		}catch(e){
			uni.showToast({
				title:'数据请求失败',
				icon:'error'
			})
		}
	}
	
	const getTaskTextFromType = (type) => {
		let taskText = type == '0' ? '筛查任务' : (type == '1' ? '派遣任务' : '随访任务')
		return taskText
	}
	
	const getTaskStatusFromStatus = (status) => {
		let taskStatus = status == '0' ? '待执行' : '已结束'
		return taskStatus
	}
	
</script>

<style lang="scss" scoped>
	::v-deep .u-cell {
		padding: 14rpx 32rpx !important;
	}

	::v-deep .u-cell_title {
		font-size: 28rpx !important;
		color: #4E5969 !important;
	}

	// ::v-deep .u-cell__value {
	// 	color: #1D2129 !important;
	// 	font-size: 28rpx !important;
	// }

	.code {
		width: 320rpx;
		height: 320rpx;
		margin: 32rpx auto 48rpx;
		text-align: center;

		img {
			width: 100%;
			height: 100%;
		}

		.text {
			font-size: 28rpx;
		}

		.num {
			font-size: 64rpx;
			font-weight: bold;
		}
	}
	.footer_view {
		position: absolute;
		bottom: 10rpx;
		width: 100%;
	}
</style>